<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>AllPublisher</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/imgs/美女.jpg"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body>
<h1>所有出版社</h1>
<span>[[${all}]]</span>
<p>
    <button onclick="function showAddPublisher() {
        $('.addPublisherInput').show();
    }
    showAddPublisher()">添加出版社
    </button>
<form method="post" action="/publisher">
    <label>
        <input class="addPublisherInput" id="addPublisherInput1" type="text" name="publisherName" style="display: none"/>
    </label>
    <input class="addPublisherInput" id="addPublisherInput2" type="submit" style="display: none"/>
</form>


<p th:each="publisher:${all}" th:id="'p'+${publisher.id}">
    <span th:id="'span'+${publisher.id}" th:text="${publisher.publisherName}"></span>
    <button th:id="'update-btn'+${publisher.id}" onclick="updatePublisher(this)">修改</button>
    <button th:id="'delete-btn'+${publisher.id}" onclick="deletePublisher(this)">删除</button>
    <label>
        <input type="text" style="display: none" th:id="'input1'+${publisher.id}"/>
        <input type="button" style="display: none" value="提交" th:id="'input2'+${publisher.id}" onclick="submit(this)"/>
    </label><br>
</p>


<script th:inline="javascript">
    const all = /*[[${all}]]*/{};
    for (const publisher of all) {
        console.log(/*[[${publisher}]]*/publisher);
    }
    all.forEach(function (value, index) {

    });
    // alert(all);
    console.log(all[0])
</script>
<script>
    function updatePublisher(o) {
        const id = $(o).attr("id").substring(10);
        // alert(id);
        $("#input1" + id).show();
        $("#input2" + id).show();
    }

    function deletePublisher(o) {
        const id = $(o).attr("id").substring(10);
        // alert(id);
        $.ajax({
            type: "delete",
            url: "/publisher",
            data: {id: id},
            success: function () {
                $("#p" + id).remove();
            }
        });
    }

    function submit(o) {
        const attr = $(o).attr('id');
        const id = attr.substring(6);
        const name = $("#input1" + id).val();
        $.ajax({
            type: "post",
            url: "/publisher/"+id,
            data: {id: id, name: name},
            success: function () {
                $("#input1" + id).hide()
                $("#input2" + id).hide();
                $("#span" + id).html(name);
            }
        });
    }
</script>
</body>
</html>